<template>
  <div class="Header"></div>
</template>

<script>
export default {
  components: {},
  data() {
    return { breadList: [], wsKey: null };
  },
  watch: {
    $route: {
      handler(val) {
        this.getBreadcrumb();
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.wsKey = localStorage.getItem("ws");
  },
  mounted() {
    this.$bus.$on("lineMatched", (item) => {
      if (item.noAdd) {
        return this.getBreadcrumb();
      }
      let list = this.breadList.filter((x) => x.path != "/lineMatched");
      list.push(item);
      this.breadList = [...list];
    });
  },
  methods: {
    goCamera() {
      // this.$router.push("/home");
      this.send({
        title: "漫游",
        type: "btn",
        name: "漫游",
      });
    },
    goCompany() {
      // this.$router.push("/home");
      this.send({
        title: "公司介绍",
        type: "btn",
        name: "公司介绍",
      });
    },
    goHome() {
      this.$router.push("/home");
    },
    isHome(route) {
      return route?.path == "/home";
    },
    getBreadcrumb() {
      let matched = this.$route.matched;
      //如果不是首页
      if (!this.isHome(matched[0])) {
        matched = [{ path: "/home", meta: { title: "场景选择" } }].concat(
          matched
        );
      }
      this.breadList = matched;
    },
    send(params) {
      let that = this;
      let ws = that.$global.ws.ws;
      let data = JSON.stringify({
        messageType: "multiScreenInteractionReq",
        message: { dest: this.wsKey, ...params },
      });
      ws.send(data);
      this.$bus.$emit("screenTimeOut");
    },
  },
  destroyed() {},
};
</script>

<style lang="scss" scoped>
.Header {
  width: 100%;
  font-family: HarmonyOS Sans SC;
  margin-bottom: 26px;
  .title {
    margin-top: 62px;
    font-weight: bold;
    font-size: 40px;
    line-height: 47px;
    background: linear-gradient(#ffffff 15%, #6ab7ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    text-align: center;
  }

  .ability_body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    .poi_body {
      .poi_title {
        width: 79px;
        padding-bottom: 5px;
        margin-bottom: 10px;
        background: url(~@/assets/image/title_bg.png) no-repeat;
        text-align: center;
        background-size: contain;
        background-position: bottom;
        & > span {
          font-weight: bold;
          font-size: 17px;
          line-height: 20px;
          background: linear-gradient(#ffffff 15%, #6ab7ff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .name_body {
        height: 39px;
        padding: 0 20px;
        background: rgba(39, 42, 44, 0.79);
        box-shadow: 0px 0px 26px 0px rgba(119, 202, 253, 0.25);
        border-radius: 22px 22px 22px 22px;
        border: 1px solid #7b7b7b;
        line-height: 39px;
        font-weight: bold;
        font-size: 18px;
        .link {
          color: #bebebe;
        }
        .active {
          color: #ffffff;
        }
      }
    }
    .btn_body {
      display: flex;
      align-items: center;
      .btn_li {
        margin-left: 60px;
        font-size: 16px;
        color: #ffffff;
        line-height: 19px;
        text-align: center;
        & > img {
          width: 50px;
          height: 50px;
          margin-bottom: 13px;
        }
        &:active {
          color: #3d7fe8;
        }
      }
    }
  }
}
</style>
